<template>
  <section class="page labeling-strategy-config" v-loading:body="importLoading">
    <data-form :model="model" :page="pageService" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="队列名称" prop="labelName">
          <el-input v-model="model.labelName"></el-input>
        </el-form-item>
        <el-form-item label="队列状态" prop="labelStatus">
          <el-select clearable placeholder="请选择" v-model="model.labelStatus">
            <el-option :key="code" :label="name" :value="code" v-for="{ code, name } in $dict.getDictData('LabelingStrategyStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运行时间" prop="checkTime">
          <el-date-picker :value-format="'yyyy-MM-dd HH:mm:ss'" placeholder="请选择日期" type="daterange" v-model="model.checkTime"></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="addClick" v-auth="256">新建队列</el-button>
        <el-button @click="manualExecutionclick" v-auth="257">手动执行</el-button>
      </template>
      <template slot="columns">
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="操作">
          <template slot-scope="scope">
            <el-button @click="modifyClick(scope)" size="small" type="text" v-auth="258">编辑</el-button>
            <el-button @click="executionRecordClick(scope)" size="small" type="text" v-auth="259">执行记录</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="队列名称" prop="labelName"></el-table-column>
        <el-table-column :formatter="row => $filter.dictConvert(row.labelStatus,'LabelingStrategyStatus')" :min-width="$helper.getColumnWidth(4)" label="队列状态" prop="labelStatus"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="创建人" prop="operatorRealName"></el-table-column>
        <el-table-column :formatter="row => $filter.dateTimeFormat(row.createTime)" :min-width="$helper.getColumnWidth(4)" label="创建时间" prop="createTime"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="编辑人" prop="modifyOperatorRealName"></el-table-column>
        <el-table-column :formatter="row => $filter.dateTimeFormat(row.modifyDatetime)" :min-width="$helper.getColumnWidth(4)" label="编辑时间" prop="modifyDatetime"></el-table-column>
        <el-table-column :formatter="row => $filter.dateTimeFormat(row.latelyDatetime)" :min-width="$helper.getColumnWidth(4)" label="最近一次运行时间" prop="latelyDatetime"></el-table-column>
      </template>
    </data-box>

    <el-dialog :center="true" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :title="openData===1?'新建队列':(openData===2?'修改队列':'查看队列')" :visible.sync="dialog.config" @open="$nextTick(()=>$refs['add-queue'].refresh(modifyData))" width="800px">
      <add-queue :modifyData="modifyData" :openData="openData" :show="show" :showData="showData" @close="dialog.config = false" @refreshData="refreshData" ref="add-queue"></add-queue>
    </el-dialog>

    <el-dialog :center="true" :close-on-click-modal="false" :close-on-press-escape="false" :title="`${labelInfo.name}队列运行记录`" :visible.sync="dialog.record" width="1220px" @open="$nextTick(() => $refs['running-record-summary'].refreshData())">
      <running-record-summary :id="labelInfo.id" @close="dialog.record=false" ref="running-record-summary"></running-record-summary>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import { State, Getter } from "vuex-class";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import ModifyConfig from "~/components/system-manage/strategy-config/modify-config.vue";
import { LabelingStrategyService } from "~/services/dataimp-service/labeling-strategy-service";
import AddQueue from "~/components/labeling-strategy/add-queue.vue";
import RunningRecordSummary from "~/components/labeling-strategy/running-record-summary.vue";

@Auth(2306)
@Layout("workspace")
@Component({
  components: {
    ModifyConfig,
    AddQueue,
    RunningRecordSummary
  }
})
export default class LabelingStrategy extends Vue {
  @Dependencies(LabelingStrategyService)
  private labelingStrategyService: LabelingStrategyService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;

  private selectionList: any[] = [];
  private modifyData: any = {};
  private openData: any = "";
  private id: any = "";
  // 数据列表
  private dataSet: any[] = [];
  // 当前行数据
  private rowData: any = null;
  private importLoading: boolean = false;
  // 弹框控制
  private dialog: any = {
    config: false,
    record: false
  };
  private show: any = false;
  private showData: any = "";

  private labelInfo = {
    name: "",
    id: ""
  };

  private model: any = {
    labelName: "", // 队列名称
    labelStatus: "", // 队列状态
    checkTime: [] // 开始时间
  };

  private refreshData() {
    this.labelingStrategyService
      .queryStrategyConfigPage(this.model, this.pageService)
      .subscribe(data => (this.dataSet = data));
  }

  private mounted() {
    this.refreshData();
  }
  // 执行记录
  private executionRecordClick(scope) {
    this.labelInfo.name = scope.row.labelName;
    this.labelInfo.id = scope.row.id;
    this.dialog.record = true;
  }

  private onSuccess() {
    this.$nextTick(() => (this.id = ""));
    this.refreshData();
  }

  /**
   * 新增点击
   */
  private addClick() {
    this.modifyData = {};
    this.openData = 1;
    this.showData = false;
    this.show = true;
    this.dialog.config = true;
  }
  /**
   * 手动执行
   */
  private manualExecutionclick() {
    // if(this.selectionList.length===0){
    //   this.$message.warning('请先选择需要手动执行的催收队列！')
    //   return;
    // }else{
    // const ids:any=this.selectionList.map(v=>v.id)
    this.labelingStrategyService.manualLabel().subscribe(data => {
      this.importLoading = true;
      setTimeout(() => {
        this.$message.success("操作成功！");
        this.refreshData();
        this.importLoading = false;
      }, 5000);
      //   }
      // )
      // }
    });
  }

  /**
   * 修改点击
   */
  private modifyClick(scope) {
    this.openData = 2;
    this.modifyData = scope.row;
    this.show = false;
    this.showData = false;
    this.dialog.config = true;
  }
}
</script>

<style lang="less" >
</style>
